<template>
  <a-modal
    :footer="null"
    :zIndex="500"
    :width="850"
    :dialog-style="{ top: '14%', left: '-7%' }"
    v-model="innerModalVisible"
    @ok="handleOk"
    @close="handleClose"
    :wrapClassName="fullscreen ? 'full-screen-cm' : ''"
    :maskClosable="false"
    :maskStyle="{ opacity: '.6', background: 'black', animation: 'none' }"
    :destroyOnClose="true"
  >
    <div slot="title" class="cm-title">
      <h3>{{ title }}</h3>
      <div class="header-buttons">
        <!-- <a @click="toggleFullScreen()"
          ><img src="~@/assets/images/components/big-small.png"
        /></a> -->
      </div>
    </div>
    <div class="cool-modal-body">
      <slot class="cm-modal-content"> Please place something in this cool modal! </slot>
    </div>
  </a-modal>
</template>
<script>
export default {
  model: {
    prop: 'visible',
    event: 'change'
  },
  props: {
    title: {
      type: String,
      default() {
        return 'Modal Title'
      }
    },
    visible: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      innerModalVisible: false,
      fullscreen: false
    }
  },
  methods: {
    handleOk(e) {
      this.innerModalVisible = false
      this.$emit('ok')
    },
    handleClose(e) {
      this.$emit('close')
    },
    toggleFullScreen() {
      this.fullscreen = !this.fullscreen
    }
  },
  computed: {},
  watch: {
    visible(nv) {
      this.innerModalVisible = nv
    },
    innerModalVisible(nv) {
      this.$emit('change', nv)
    }
  }
}
</script>
<style lang="scss" scoped>
.cm-title {
  text-align: center;
}
::v-deep .ant-modal-wrap {
  transition: backdrop-filter 1s linear;
  backdrop-filter: blur(3px);
}
::v-deep .ant-modal {
  transition: width, height 0.6s linear !important;
}
::v-deep .ant-modal-content {
  background: url('~@/assets/images/tkbg.png');
  // background-size: 100% 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
::v-deep .ant-modal-header {
  border-bottom: 0px solid #e8e8e8 !important;
  height: 50px;
  .ant-modal-title {
    color: white;
  }
  .ant-modal-title h3 {
    font-size: 20px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
    line-height: 12px;
  }

  background: transparent;
}
::v-deep .ant-modal-body {
  padding: 3px 27px;
}
::v-deep .ant-modal-close-x {
  color: white;
  font-size: 18px;
  margin-top: 0px;
}
.cool-modal-body {
  min-height: 475px;
}
::v-deep .cm-modal-content {
  margin: 0px;
  min-height: 300px;
}
.header-buttons {
  position: absolute;
  right: 54px;
  top: 36px;
}
::v-deep .full-screen-cm .ant-modal {
  width: 100% !important;
  height: 100vh !important;
  .cool-modal-body {
    min-height: calc(100vh - 103px) !important;
  }
}
.cool-modal-body {
  color: white;
}
</style>
